<template>
  <div class="seekbar" id="seekbar" @mousedown.stop="fMouseDown($event)"></div>
</template>

<script>
export default {
  name: "SeekbarForDrawer",
  props: {},
  emits: ['fSeekBarCallback'],
  setup(props, context) {
    const fMouseDown = (event) => {
      const seekbar = document.getElementById('seekbar');
      const p = seekbar.parentNode;
      const startWidth = p.offsetWidth;
      document.onselectstart = () => false;
      let endWidth = 0;

      const x1 = event.clientX;

      // 使用 requestAnimationFrame 优化性能
      const onMouseMove = (event2) => {
        const xOffset = event2.clientX - x1;
        endWidth = startWidth - xOffset;
        // 限制最小宽度，避免拖动过度
        endWidth = Math.max(200, endWidth);
      };

      const onMouseUp = () => {
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
        document.onselectstart = () => true;
        if (endWidth !== 0) {
          context.emit('fSeekBarCallback', endWidth);
        }
      };

      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);

      return false;
    }

    return {
      fMouseDown
    }
  }
}
</script>

<style scoped>
.seekbar {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  left: 0;
  will-change: transform; /* 添加硬件加速 */
  width: 6px;
  height: 100vh;
  border: solid 1px lightgray;
  background: url("../../assets/images/split_flag.png") no-repeat center;
  cursor: w-resize;
  border-radius: 4px;
}
</style>